<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8" />

  <!-- Use the .htaccess and remove these lines to avoid edge case issues.
       More info: h5bp.com/b/378 -->
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />

  <title>Canvas Breakout Demo</title>
  <meta name="description" content="HTML5 Canvas Breakout demo" />
  <meta name="author" content="Roger Xu" />

  <!-- Mobile viewport optimized: h5bp.com/viewport -->
  <meta name="viewport" content="width=device-width,initial-scale=1" />

  <!-- Place favicon.ico and apple-touch-icon.png in the root directory: mathiasbynens.be/notes/touch-icons -->

  <link rel="stylesheet" href="../css/style.css" />
  <link rel="stylesheet" href="../script/libs/jquery-ui/themes/base/jquery.ui.all.css" />

  <!-- All JavaScript at the bottom, except this Modernizr build incl. Respond.js
       Respond is a polyfill for min/max-width media queries. Modernizr enables HTML5 elements & feature detects;
       for optimal performance, create your own custom Modernizr build: www.modernizr.com/download/ -->
  <script src="../script/libs/modernizr-2.0.6.min.js"></script>

  <style>
    .hidden {
        display: none;
    }

    .clearfix {
        clear: both;
    }

    nav ul {
        margin: 0;
        padding: 0;
        font-weight: bold;
    }

    canvas {
        border: 1px solid black;
    }
  </style>
</head>

<body>
  <header>
    <h1 style="float: left">Canvas Breakout Demo</h1>
    <div class="clearfix"></div>
  </header>

  <nav id="navigation">
    <ul>
      <li id="version">Unknown jQuery Version</li>
      <li id="ui-version">Unknown jQuery UI Version</li>
    </ul>
  </nav>

  <div id="main" role="main">
    <p>God helps those who help themselves.</p>
    <div id="toolbar"></div>
    <div id="content">
      <canvas id="canvas" width="300" height="300">Canvas</canvas>
    </div>
  </div>

  <footer>
    <div>Copyright &copy; 2011. All rights reserved.</div>
  </footer>

  <!-- JavaScript at the bottom for fast page loading -->

  <script src="../script/libs/jquery-1.7.1.js"></script>
  <script>window.jQuery || document.write('<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"><\/script>')</script>
  <script src="../script/libs/jquery-ui-1.8.16.js"></script>
  <script>window.jQuery.ui || document.write('<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js"><\/script>')</script>
  <script src="../script/libs/json2.js"></script>
  <script src="../script/libs/jsrender.js"></script>

  <!-- scripts concatenated and minified via ant build script-->
  <script defer src="../script/plugins.js"></script>
  <!-- end scripts-->

  <script>
    var BreakoutDemo = function(canvas) {
        var ctx = canvas.get(0).getContext('2d');

        var backColor = 'white';
        var WIDTH = 300;
        var HEIGHT = 300;
        var ballRadius = 10;
        var ballColor = 'black';
        var x = 150;
        var y = 150;
        var dx = 2;
        var dy = 4;
        var intervalId = null;

        // keyboard support
        var leftDown = false;
        var rightDown = false;

        function onKeyDown(evt) {
            if (evt.keyCode === 37) {
                leftDown = true;
            }

            if (evt.keyCode === 39) {
                rightDown = true;
            }
        };

        function onKeyUp(evt) {
            if (evt.keyCode === 37) {
                leftDown = false;
            }

            if (evt.keyCode === 39) {
                rightDown = false;
            }
        };

        $(document).keydown(onKeyDown);
        $(document).keyup(onKeyUp);

        // mouse support
        var canvasMinX = 0;
        var canvasMaxX = 0;

        function initMouse() {
            canvasMinX = canvas.offset().left;
            canvasMaxX = canvasMinX + WIDTH;
        }
        
        function onMouseMove(evt) {
            if (evt.pageX > canvasMinX && evt.pageX < canvasMaxX) {
                paddlex = evt.pageX - canvasMinX;
            }
        }
        
        $(document).mousemove(onMouseMove);

        // paddle
        var paddleColor = 'black';
        var paddlex = 0;
        var paddlew = 0;
        var paddleh = 0;

        function initPaddle() {
            paddlex = WIDTH / 2;
            paddlew = 100;
            paddleh = 10;
        };

        // bricks
        var bricks = null;
        var NROWS = 0;
        var NCOLS = 0;
        var BRICK_WIDTH = 0;
        var BRICK_HEIGHT = 0;
        var PADDING = 0;
        var rowColors = ['red', 'orange', 'yellow', 'green', 'blue'];

        function initBricks() {
            NROWS = 5;
            NCOLS = 5;
            BRICK_WIDTH = (WIDTH / NCOLS) - 1;
            BRICK_HEIGHT = 15;
            PADDING = 1;
            
            bricks = new Array(NROWS);
            for (var i = 0; i < NROWS; i++) {
                bricks[i] = new Array(NCOLS);
                for (var j = 0; j < NCOLS; j++) {
                    bricks[i][j] = 1;
                }
            }
        };
        
        function drawBricks() {
            for (var i = 0; i < NROWS; i++) {
                ctx.fillStyle = rowColors[i];

                for (var j = 0; j < NCOLS; j++) {
                    if (bricks[i][j] === 1) {
                        rect(j * (BRICK_WIDTH + PADDING) + PADDING, i * (BRICK_HEIGHT + PADDING) + PADDING, BRICK_WIDTH, BRICK_HEIGHT);
                    }
                }
            }
        };

        function circle(x, y, r) {
            ctx.beginPath();
            ctx.arc(x, y, r, 0, Math.PI * 2, true);
            ctx.closePath();
            ctx.fill();
        };

        function rect(x, y, w, h) {
            ctx.fillRect(x, y, w, h);
        };

        function clear() {
            ctx.clearRect(0, 0, WIDTH, HEIGHT);
        };

        function draw() {
            ctx.fillStyle = backColor;
            // clear frame
            clear();
            
            // ball
            ctx.fillStyle = ballColor;
            circle(x, y, ballRadius);

            // move the paddle if left or right is currently pressed
            if (leftDown) {
                paddlex -= 5;
            } else if (rightDown) {
                paddlex += 5;
            }
            
            // paddle
            ctx.fillStyle = paddleColor;
            rect(paddlex, HEIGHT - paddleh, paddlew, paddleh);

            // bricks
            drawBricks();

            // have we hit a brick?
            var rowHeight = BRICK_HEIGHT + PADDING;
            var colWidth = BRICK_WIDTH + PADDING;
            var row = Math.floor(y / rowHeight);
            var col = Math.floor(x / colWidth);
            
            // if so, reverse the ball and mark the brick as broken
            if (y < NROWS * rowHeight && row >= 0 && col >= 0 && bricks[row][col] === 1) {
                dy = -dy;
                bricks[row][col] = 0;
            }

            // change state
            if (x + dx > WIDTH || x + dx < 0) {
                dx = -dx;
            }
            
            if (y + dy < 0) {
                dy = -dy;
            } else if (y + dy > HEIGHT) {

                if (x > paddlex && x < paddlex + paddlew) { // inside paddle
                    dy = -dy;
                } else { // outside paddle
                    // game over
                    clearInterval(intervalId);
                }
            }

            x += dx;
            y += dy;
        };

        // start animation
        initMouse();
        initPaddle();
        initBricks();
        intervalId = setInterval(draw, 10);
    };

  </script>
  <script>
    $(document).ready(function() {
        // version
        var version = $.fn.jquery;
        $('#version').html('jQuery: ' + version);
        var uiVersion = $.ui.version;
        $('#ui-version').html('jQuery UI: ' + uiVersion);

        // canvas
        var canvas = $('#canvas');

        // breakout
        BreakoutDemo(canvas);
    });
  </script>
</body>
</html>